/* 总体样式 */
.gradient {
  color: $text-color;
  background: $moudle-color;
}

.contentBox {
  display: flex;
  flex-direction: column;

  .gradient:nth-child(2) {
    margin-top: $layout-padding;
    flex: 1;
    min-height: 400px;
    overflow: hidden;
  }

  .gradient:nth-child(3) {
    margin-top: $layout-padding;
    min-height: 300px;
    flex: 1;
    // overflow: hidden;
  }

  .sole {
    flex: 1;
    margin-top: $layout-padding;
  }
}

// 查看明细title
.detail-title {
  font-size: 14px;
  color: $title-color;
}

// echarts图表的样式 tooptip的样式
.tooptip-info {
  background-color: $moudle-color;
  min-width: 200px;

  .tooptip-title {
    width: 100%;
    // border-bottom: 1px solid $border-color;
    font-size: 14px;
    padding: 10px;
  }

  .tooptip-content {
    padding: 0 10px 10px 10px;

    .tooptip-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px !important;

      .tooptip-label {
        display: flex;
        align-items: center;

        .tooptip-label-icon {
          // 柱状图样式
          width: 12px;
          height: 12px;
          border-radius: 2px;
          display: inline-block;
          margin-right: 6px;
        }

        .tooptip-label-icon-line {
          // 折线图样式
          width: 12px;
          height: 2px;
          border-radius: 2px;
          display: inline-block;
          margin-right: 6px;
        }
      }

      .tooptip-value {}

      .tooptip-unit {}
    }
  }

}

// check group 选中状态
.chosen {
  border: 1px solid $highlight-color !important;
}

// 头部搜索+表格样式
.common-table-panel,
.home-table,
.el-drawer {
  height: 100%;

  // 头部搜索
  .search-header {
    width: 100%;
    min-height: 66px;
    color: $text-color;
    background: $moudle-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 16px 18px;

    // 左边搜索条件
    .left-search {
      .search-form {
        .el-form-item {
          margin: 0 16px 0 0;
        }
      }
    }

    // 右边按钮框
    .right-btn {}
  }

  // 表格部分
  .table-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: $moudle-color;

    // 表格上方搜索条件部分
    .table-top {
      display: flex;
      align-items: center;
      padding: 0 $layout-padding;
      justify-content: space-between;

      .left-btn {
        display: flex;
        align-items: center;

        .el-button {
          i {
            margin-right: 5px;
          }
        }
      }

      .table-top-span {
        font-size: 14px;
        margin-right: 40px;
        color: $serach-label-color;
      }

      .el-icon-view {
        margin-right: 5px;
      }

      .hidden-btn {
        width: 112px;

        img {
          margin-right: 5px;
        }

        span {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .recover-btn {
        width: 138px;
      }

      .cancle-btn {
        width: 138px;
      }

      .el-button {
        float: left;
      }

      .checks {
        margin: 10px 0;

        .checkTitle {
          margin-right: 10px;
        }

        .checkGroup {
          display: inline-block;

          .el-checkbox-group {
            .el-checkbox {
              color: $serach-label-color !important;
              margin: 0;
              margin-left: 5px;
              padding: 0 5px;
              border-right: 1px solid $dividing-line-linhight-color;
            }

            .el-checkbox:last-child {
              border: none;
              padding-right: 0;
            }

            .el-checkbox__input.is-checked+.el-checkbox__label {
              color: $serach-label-color;
            }

            .el-select .el-input__inner {
              width: 88px;
              margin: 0 0 0 10px;
            }
          }

          .el-checkbox__inner {
            background-color: $checkbox-unchecked-bg-color;
            border-color: $checkbox-unchecked-border-color !important;
          }

          .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: $checkbox-checked-bg-color;
            border-color: $checkbox-checked-border-color !important;
          }
        }
      }
    }

    .table-body {
      margin: 0 16px;
    }

    .table-body-only {
      margin: 16px;
    }

    .pagination {
      margin-top: 20px;

      // 分页样式
      .el-pagination {
        float: right;
        padding: 0 24px;
        border-radius: 2px;
        height: 28px;
        line-height: 28px;

        .el-pagination__total,
        .el-pagination__jump {
          color: $pagination-text-color !important;
          border-radius: 2px;
          height: 28px;
          line-height: 28px;
        }

        .el-pagination button:disabled {
          background-color: $pagination-bg-color;
        }

        .el-pagination__editor,
        .el-pagination__sizes {
          .el-input__inner {
            font-size: 14px;
            border-radius: 2px;
            height: 28px;
            line-height: 28px;
            border: 1px solid $pagination-border-color;
            background: $pagination-bg-color;
            color: $pagination-select-color;
          }
        }

        .el-select .el-input {
          margin: 0 8px;
        }

        .el-pagination__sizes {
          margin: 0 !important;
          height: 28px;
          line-height: 28px;
        }

        .btn-prev,
        .btn-next,
        .el-pager>li {
          min-width: 28px;
          font-size: 14px;
          border-radius: 2px;
          height: 28px;
          line-height: 28px;
          border: 1px solid $pagination-border-color;
          background: $pagination-bg-color;
          color: $pagination-select-color;
        }

        .btn-prev {
          margin-right: 4px;
          padding: 0;
        }

        .btn-next {
          margin-left: 4px;
          padding: 0;
        }

        .el-pager>li {
          margin: 0 4px;
        }

        .el-pager li.active {
          background: $pagination-select-bg-color;
        }
      }
    }
  }
}

.el-drawer {
  height: 100%;

  .search-export-btn {
    margin: 0 25px;
  }

  .search-header {

    // 左边搜索条件
    .left-search {
      .search-form {
        .search-add-btn {
          margin-left: 30px;
        }

        .el-form-item {
          margin: 0 10px 10px 0;

          .el-form-item__content .el-input__inner {
            width: 180px !important;
          }

          .el-form-item__content .el-date-editor--daterange {
            width: 220px !important;
          }
        }
      }
    }

    // 右边按钮框
    .right-btn {}
  }
}

// 表格中点击表格cell出来的详细数据表格（commonTable）
.el-popover {
  overflow: scroll;
  background: $table-highlight-bg-color !important;

  .top-text {
    border-bottom: 1px solid $table-border-color;
    font-size: 14px;
    color: $title-color;
    padding: 10px;
  }

  .el-table {
    .el-table__row:hover>td {
      background: $table-highlight-bg-color !important;
      color: $table-highlight-color;
    }

    // .el-table__body-wrapper {
    //   overflow-y: hidden;
    //   overflow-x: scroll;
    // }
  }
}

// scrollTable的样式
.header-table {
  .el-table {
    border: none;

    .el-table__header-wrapper {
      .el-table__header thead tr {
        padding: 0;

        th {
          padding: 0;

          .cell {
            padding: 0;
          }
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__body tbody tr {
        padding: 0;

        td {
          padding: 0;

          .cell {
            padding: 0;
          }
        }
      }
    }
  }
}

// 时间选择-季度选择
.time-season-select {
  .el-card {
    background-color: $moudle-color;
    border: 0;
  }

  .el-card>>>.el-card__header {
    line-height: 30px;
    border-bottom: 1px solid $border-color !important;
  }

  ._mark {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 999;
  }

  .yearBtn {
    text-align: center;
    padding: 0;
  }

  .box-card {
    width: 260px;
    padding: 0 3px 20px;
    margin-top: 10px;
    position: fixed;
    right: 40px;
    z-index: 9999;
  }

  .text.item {
    display: flex;
    justify-content: space-around;
  }

  .text.item .el-button--text {
    width: 40%;
    color: $date-color;
  }

  .text.item .el-button:hover {
    width: 40%;
    color: $date-hover-color;
  }

  .text.item ._left {
    float: left;
  }

  .text.item ._right {
    float: right;
  }
}

// 消息中心样式
.table_ul {
  padding: 0px 15px;

  .li_item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0px;
    color: $text-color;
    border-bottom: 1px solid $border-color;
    line-height: 25px;

    .el-collapse {
      border: none;

      .el-collapse-item {
        .el-collapse-item__header {
          background-color: transparent;
          color: $title-color;
          border: none;
          line-height: 1;
        }

        .el-collapse-item__wrap {
          background-color: transparent;
          border: none;
          margin-left: 28px;

          .el-collapse-item__content {
            color: $title-color;
            padding-bottom: 16px;
          }
        }
      }

      .msgContent {
        display: flex;
        font-size: 14px;
        margin-bottom: 5px;
        height: 48px;
        justify-content: center;
        align-items: center;

        .imgBox {
          i {
            font-size: 20px;
            // color: $prompt-warning-color;
            color: $icon-header-color;
            ;
          }

          margin-right: 16px;
        }

        .textBox {
          max-width: 1150px;

          div {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }

    .msgTime,
    .name {
      margin-left: 10px;
      font-size: 12px;
      color: #ccc;
    }
  }
}

// 首页样式
.homePage {
  .homePage-card1 {
    display: flex;
    font-size: 14px;

    .chart-panel-dividing {
      border-right: 1px solid;
      border-image: linear-gradient(180deg, rgba(53, 64, 96, 0), rgba(53, 64, 96, 1), rgba(53, 64, 96, 0)) 1 1;
    }

    .chart-panel {
      flex: 1;

      .title {
        margin-top: 7px;
        width: 60%;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        color: $title-color;
        margin-bottom: 18px;
        text-align: center;
        background: linear-gradient(90deg, rgba(10, 59, 123, 0) 0%, #2a4676 50%, rgba(10, 59, 123, 0) 100%);
      }

      .process-style {
        padding: 30px 20px;
      }

      .progress-panel {
        &:last-child {
          margin-top: 16px;
        }

        .progress-title {
          display: flex;
          justify-content: space-between;

          .left {
            font-size: 14px;
            color: $text-color;
          }

          .right {
            font-size: 14px;
            color: $title-color;
            font-weight: bold;
            font-family: $engish-font-family;
          }
        }

        .proccess-content {
          margin-top: 10px;

          .el-progress-bar__outer {
            border-radius: 5px;
            background: $progress-bg-color;
          }

          .progress-color1 {
            .el-progress-bar__inner {
              background: $progress-bg-color1;
            }
          }

          .progress-color2 {
            .el-progress-bar__inner {
              background: $progress-bg-color2;
            }
          }
        }
      }
    }
  }

  .homePage-card2 {
    display: flex;
    font-size: 14px;

    .chart-panel {
      flex: 1;
    }

    .info {
      padding: 20px;
      flex: 0.5;
      border: 1px solid $border-color;
      border-radius: 2px;

      .title {
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        color: $title-color;
        margin-bottom: 18px;
        text-align: center;
        background: linear-gradient(90deg, rgba(10, 59, 123, 0) 0%, #2a4676 50%, rgba(10, 59, 123, 0) 100%);
      }

      p {
        line-height: 28px;
        color: $text-color;

        .unit1 {
          color: $unit-text-color1;
        }

        .unit2 {
          color: $unit-text-color2;
        }
      }
    }
  }
}

// 增加这个样式 可以解决在ie浏览器 表格滚动条不灵活问题 
// 但是会造成fixed列无法选中元素
// .el-table__fixed,
// .el-table__fixed-right {
//   pointer-events: none;
//   z-index: 99;
//   // 解决因上一条样式引起的固定列无法选中的问题
//   .el-table__fixed-body-wrapper {
//     // pointer-events: all;
//   }
// }